<template>
	<view class="login-page">
		<view class="login-page-title">{{ pageType === 1 ? '短信验证码登录' : '输入验证码' }}</view>
		<view class="login-page-tips" v-show="!hasSendVcode"></view>
		<view class="login-page-tips" v-show="hasSendVcode">验证码已发送至手机：<text class="deep-color">{{phoneNum}}</text></view>
		<view class="input-bar">
			<input class="input" type="number" maxlength="6" v-model="vCode" placeholder="请输入验证码"></input>
			<text class="resend-btn" v-show="countTime < 0" @tap="toSendVCode">发送验证码</text>
			<text class="count" v-show="countTime >= 0">{{countTime}}s后重新获取</text>
		</view>
		<largeBtn :disabled="btnDisabled" @btnClk="toNext">{{pageType === 1 ? '登录' : '立即绑定' }}</largeBtn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNum:'',
				pageType: 1, // 1：验证码登录 2：微信登录绑定手机号验证码
				vCode: '',
				countTime: -1,
				hasSendVcode: false
			}
		},
		computed: {
			btnDisabled() {
				const flag = /\d{6}/.test(this.vCode)
				return !flag
			}
		},
		onLoad(options){
			this.phoneNum = options.phone
			this.pageType = options.pageType * 1
		},
		beforeDestroy(){
			this.clearTimer()
		},
		methods: {
			sendVcode(){
				if(!this.hasSendVcode){
					this.hasSendVcode = true
				}
				// 发送验证码
				this.$api.sendVcode({ phone:this.phoneNum })
			},
			startCount(){
				this.countTime = 60
				this.timeCount()
			},
			timeCount(){
				this.countTimer = setTimeout(()=>{
					this.countTime--;
					if(this.countTime < 0){
						this.clearTimer()
					}else{
					    this.timeCount()
					}
				},1000)
			},
			clearTimer(){
				if(this.countTimer){
					clearTimeout(this.countTimer)
					this.countTimer = null
				}
			},
			toNext() {
				uni.showLoading({mask: true});
				if(this.pageType === 1){
					// 验证码登录
					this.$api.loginByCode({
                        phone: this.phoneNum,
                        code: this.vCode
					}).then((res)=>{
						this.$setToken(res)
				        this.showTipsThenJump('登录成功')
					})
				}else{
                    // 微信登录时绑定以注册过的手机
					this.$api.registerByWx({
						account: this.$store.state.userWxOpenidData.openid,
						phone: this.phoneNum,
						checkCode: this.vCode,
						password: '', // 已注册的手机号传空就行
					}).then((res)=>{
						this.$setToken(res)
				        this.showTipsThenJump('登录成功')
					})
				}
				
			},
			toSendVCode(){
				this.sendVcode()
				this.startCount()
			},
			showTipsThenJump(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
				this.$getGlobalDataWhenLogin()
				setTimeout(() => {
					uni.redirectTo({
						 url: '/pages/index/index?type=1'
					});
				}, 1500)
			},

		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		width: 670rpx;
		margin: 0 auto;
		padding-top: 54rpx;

		.login-page-title {
			font-size: 48rpx;
			font-weight: 400;
			color: #323746;
			line-height: 60rpx;
		}

		.login-page-tips {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #9196A0;
			line-height: 32rpx;
            height: 32rpx;
			.deep-color {
				color: #323746;
			}
		}

		.input-bar {
			margin-top: 60rpx;
			margin-bottom: 120rpx;
			height: 120rpx;
			border-bottom: 2rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input {
				width: 100%;
				font-size: 36rpx;
				font-weight: 400;
				color: #9196A0;
				line-height: 44rpx;
			}
				
			.resend-btn{
				white-space: nowrap;
				font-size: 24rpx;
				font-weight: 400;
				color: #2D82FF;
				line-height: 32rpx;
			}

			.count {
				white-space: nowrap;
				font-size: 24rpx;
				font-weight: 400;
				color: #9196A0;
				line-height: 32rpx;
			}

		}
	}
</style>
